import Taro, {Component} from '@tarojs/taro'
import {Image, View, Text} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import './classify.less'
import {AtTabs, AtTabsPane, AtSearchBar, AtToast} from 'taro-ui'
import {classifyData} from "../../common/classify/options"

@connect(({classify}) => ({
  ...classify,
}))

class Classify extends Component {
  config = {
    navigationBarTitleText: '分类'
  }

  constructor(props) {
    super(props)
    this.state = {
      current: 0,
      isOpened: false,
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  handleClick = (currentKey) => {

    this.setState({
      current: currentKey
    })

  }

  render() {

    const {current, isOpened} = this.state;
    return (
      <View className='fx-classify-wrap'>
        <AtSearchBar fixed={true}/>
        <View style={{height: '2.5rem'}}/>
        <AtTabs
          current={current}
          scroll
          height='100vh'
          tabDirection='vertical'
          animated={false}
          tabList={[
            {title: '热搜推荐'},
            {title: '手机数码'},
            {title: '家用电器'},
            {title: '电脑办公'},
            {title: '生鲜果蔬'},
            {title: '酒水饮料'},
            {title: '生活美食'},
            {title: '美妆护肤'},
            {title: '个人清洁'},
            {title: '女装内衣'},
            {title: '男装内衣'},
            {title: '鞋靴箱包'},
            {title: '运动户外'},
            {title: '生活充值'},
            {title: '汽车生活'},
            {title: '母婴童装'},
            {title: '玩具乐器'},
            {title: '家居家纺'},
            {title: '家具建材'},
            {title: '医药保健'},
            {title: '时尚钟表'},
            {title: '礼品鲜花'},
          ]}
          onClick={this.handleClick}>
          <AtTabsPane tabDirection='vertical' current={current} index={0}>
            <View style='font-size:18px;text-align:center;min-height:200px;'>
              <Text className='classify-title'>
                大牌手机
              </Text>
              <View className='at-row at-row--wrap'>
                {
                  classifyData.map(value => {
                    return (
                      <View
                        className='at-col at-col-4'
                        onClick={() => this.setState({isOpened: true})}
                        key={value.key}>
                        <Image
                          className='classify-img'
                          src={value.url}
                          alt=''
                          mode='aspectFill'
                          lazyLoad={true}
                        />
                        <Text className='classify-text'>
                          {value.title}
                        </Text>
                      </View>
                    )
                  })
                }
              </View>
              <Text className='classify-title'>
                热销推荐
              </Text>
              <View className='at-row at-row--wrap'>
                {
                  classifyData.map(value => {
                    return (
                      <View
                        className='at-col at-col-4'
                        onClick={() => this.setState({isOpened: true})}
                        key={value.key}>
                        <Image
                          className='classify-img'
                          src={value.url}
                          alt=''
                          mode='aspectFill'
                          lazyLoad={true}
                        />
                        <Text className='classify-text'>
                          {value.title}
                        </Text>
                      </View>
                    )
                  })
                }
              </View>
            </View>
          </AtTabsPane>
          <AtTabsPane tabDirection='vertical' current={current} index={1}>
            <View style='font-size:18px;text-align:center;height:200px;'>标签页二的内容</View>
          </AtTabsPane>
          <AtTabsPane tabDirection='vertical' current={current} index={2}>
            <View style='font-size:18px;text-align:center;height:200px;'>标签页三的内容</View>
          </AtTabsPane>
          <AtTabsPane tabDirection='vertical' current={current} index={3}>
            <View style='font-size:18px;text-align:center;height:200px;'>标签页四的内容</View>
          </AtTabsPane>
          <AtTabsPane tabDirection='vertical' current={current} index={4}>
            <View style='font-size:18px;text-align:center;height:200px;'>标签页五的内容</View>
          </AtTabsPane>
          <AtTabsPane tabDirection='vertical' current={current} index={5}>
            <View style='font-size:18px;text-align:center;height:200px;'>标签页六的内容</View>
          </AtTabsPane>
        </AtTabs>


        <AtToast
          isOpened={isOpened}
          status='loading'
          text="正在努力建设中..."
          duration={500}
          onClose={() => this.setState({isOpened: false})}
        />
      </View>
    )
  }
}

export default Classify
